<template>
	<view class="main">
		<view class="login">
			<view class="netlogin" v-if="!flag">
				登录/注册
			</view>
			<view class="logged" v-if="flag">
				<img :src="list.avatarUrl" alt="" class="img"/>
				<view class="loginname">
					{{list.nickName}}
				</view>
			</view>
		</view>
		<view class="that_person">
			<view class="balance">
				<view class="balance_top">
					-
				</view>
				<view class="balance_bottom">
					余额
				</view>
			</view>
			<view class="integral">
				<view class="integral_top">
					-
				</view>
				<view class="integral_bottom">
					积分
				</view>
			</view>
			<view class="share">
				<view class="share_top">
					-
				</view>
				<view class="share_bottom">
					分享
				</view>
			</view>
		</view>
		<!-- 商城服务 -->
		<view class="mall_orders">
			<view class="mall_orders_top">
				商城订单
			</view>
			<view class="mall_orders_bottom">
				<view class="whole">
					<view class="icon iconfont icon-qianbao"></view>
					<view class="whole_bottom">
						全部
					</view>
				</view>
				<view class="obligation">
					<view class="icon iconfont icon-daifukuan"></view>
					<view class="obligation_bottom">
						待付款
					</view>
				</view>
				<view class="paid">
					<view class="icon iconfont icon-yifukuan2"></view>
					<view class="paid_bottom">
						已付款
					</view>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="my_services">
			<view class="my_services_title">
				我的服务
			</view>
			<view class="my_services_top">
				<view class="film_download" @click="xia">
					<view class="icon iconfont icon-yunxiazai"></view>
					<view class="film_download_bottom">
						底片下载
					</view>
				</view>
				<view class="sharing">
					<view class="icon iconfont icon-liwu"></view>
					<view class="sharing_bottom">
						分享有礼
					</view>
				</view>
				<view class="coupons">
					<view class="icon iconfont icon-wodeyouhuijuan"></view>
					<view class="coupons_bottom">
						优惠劵
					</view>
				</view>
				<view class="address">
					<view class="icon iconfont icon-dizhi"></view>
					<view class="address_bottom">
						收货地址
					</view>
				</view>
			</view>
			<view class="my_services_bottom">
				<view class="agreement">
					<view class="icon iconfont icon-fuwuxieyi"></view>
					<view class="agreement_bottom">
						服务协议
					</view>
				</view>
				<view class="feedback">
					<view class="icon iconfont icon-yijianfankui"></view>
					<view class="feedback_bottom">
						意见反馈
					</view>
				</view>
				<view class="system">
					<view class="icon iconfont icon-shezhi"></view>
					<view class="system_bottom">
						系统设置
					</view>
				</view>
				<view class="online">
					<view class="icon iconfont icon-chat"></view>
					<view class="online_bottom">
						在线客服
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, onActivated, onMounted,onBeforeMount, reactive, ref } from 'vue';
import {getToken} from '@/utils/utils.js'
import {onLoad,onShow} from "@dcloudio/uni-app";

const list = ref([])
const flag = ref(false)

onLoad(()=>{
	list.value = uni.getStorageSync('xinxi')
	uni.getStorageSync('token') ? flag.value = true : flag.value = false
})
onMounted(()=>{
	if(!getToken()){
		uni.showModal({
			showCancel:'去登录',
			content:'您还没登录',
			confirmText:'去登录',
			success(res){
				if(res.confirm){
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}
			}
		})
	}
})


let xia = ()=>{
	uni.navigateTo({
		url:'/pages/my/negative'
	})
}

</script>

<style lang="less" scoped>
@import url("../../static/iconfont.css");
.main{
	width: 100%;
	height: 100vh;
	background-color: #F4F4F4;
	
	//登录
	.login{
		width: 94%;
		height: 160rpx;
		padding: 10px 10px;
		line-height: 50px;
		font-size: 35rpx;
		// border: 1px solid black;
		
		.netlogin{
			width: 95%;
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0px 10px;
		}
		
		.logged{
			width: 100%;
			height: 80px;
			display: flex;
			// border: 1px solid black;
			
			.img{
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
			.loginname{
				margin-left: 20px;
			}
		}
	}
	
	.that_person{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 150rpx;
		text-align: center;
		// border: 1px solid black;
		
		.balance{
			font-size: 30rpx;
		}
		
		.integral{
			font-size: 30rpx;
		}
		
		.share{
			font-size: 30rpx;
		}
	}
	
	//商城订单
	.mall_orders{
		width: 90%;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 10px;
		padding: 20px 10px;
		
		.mall_orders_top{
			font-size: 40rpx;
		}
		
		.mall_orders_bottom{
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			margin-top: 30rpx;
			
			.whole{
				width: 100rpx;
				height: 110rpx;
				.icon-qianbao{
					font-size: 70rpx;
				}
				.whole_bottom{
					font-size: 30rpx;
				}
			}
			
			.obligation{
				width: 100rpx;
				height: 110rpx;
				.icon-daifukuan{
					height: 70rpx;
					line-height: 70rpx;
					font-size: 55rpx;
				}
				.obligation_bottom{
					font-size: 30rpx;
				}
			}
			
			.paid{
				width: 100rpx;
				height: 110rpx;
				.icon-yifukuan2{;
					font-size: 70rpx;
				}
				.paid_bottom{
					font-size: 30rpx;
				}
			}
		}
	}
	
	//我的服务
	.my_services{
		width: 90%;
		background-color: #fff;
		margin: 15px auto;
		border-radius: 10px;
		padding: 20px 10px;
		
		.my_services_title{
			font-size: 40rpx;
		}
		
		.my_services_top{
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			margin-top: 20px;
			font-size: 30rpx;
			
			.film_download{
				.icon-yunxiazai{
					font-size: 30px;
					color: #3574A9;
				}
				.film_download_bottom{
					font-size: 30rpx;
				}
			}
			.sharing{
				.icon-liwu{
					font-size: 30px;
					color: #3574A9;
				}
				.sharing_bottom{
					font-size: 30rpx;
				}
			}
			.coupons{
				.icon-wodeyouhuijuan{
					font-size: 30px;
					color: #3574A9;
				}
				.coupons_bottom{
					font-size: 30rpx;
				}
			}
			.address{
				.icon-dizhi{
					font-size: 30px;
					color: #3574A9;
				}
				.address_bottom{
					font-size: 30rpx;
				}
			}
		}
		
		.my_services_bottom{
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			margin-top: 20px;
			
			.agreement{
				.icon-fuwuxieyi{
					font-size: 30px;
					color: #3574A9;
				}
				.agreement_bottom{
					font-size: 30rpx;
				}
			}
			.feedback{
				.icon-yijianfankui{
					font-size: 30px;
					color: #3574A9;
				}
				.feedback_bottom{
					font-size: 30rpx;
				}
			}
			.system{
				.icon-shezhi{
					font-size: 30px;
					color: #3574A9;
				}
				.system_bottom{
					font-size: 30rpx;
				}
			}
			.online{
				.icon-chat{
					font-size: 30px;
					color: #3574A9;
				}
				.online_bottom{
					font-size: 30rpx;
				}
			}
		}
	}
}
</style>